<template>
    <div class="topic">
        <div class="title">专题精选</div>
        <van-swipe :loop="false" :width="300" :show-indicators="false">
          <van-swipe-item v-for="item in topicList" :key="item.id">
            <img :src="item.item_pic_url" alt="">  
            <h2>
                {{item.title}}
                <span style="color: darkred">
                    <!-- 价格过滤器main.js -->
                    {{item.price_info | RMBFormat}}起
                </span>
            </h2>
            <p>{{item.subtitle}}</p>
          </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script>
    export default {
        props: ["topicList"],
        data(){
            return {
                
            };
        }
    }
</script>

<style lang = "less" scoped>
  .topic {
  margin-top: 20px;
  background-color: #fff;
  margin-bottom: 20px;
  padding: 0 8px;
  .title {
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
  }
  .van-swipe-item {
    margin-right: 15px;
    height: auto;
    padding-bottom: 10px;
    background-color: #fff;
    h2 {
      line-height: 40px;
      font-size: 16px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      width: 90%;
    }
    p {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      width: 90%;
    }
    img {
      width: 100%;
      height: 200px;
    }
  }
}
</style>
